<template>
  <div>
    <vHeader>单曲详情页</vHeader>
    <div class="content" v-if="songsDetailsObj.name">
      <div class="bgWrapper">
        <img :src="songsDetailsObj.al.picUrl" alt />
        <div class="songsText"></div>
      </div>
      <div class="lyricContent" v-if="songsLyric.length" ref="lyricContent">
        <p
          v-for="(item, index) in songsLyric"
          :key="index"
          :class="speed>=item.time?'over':''"
        >{{item.lyric}}</p>
      </div>
      <div class="audioControler">
        <button>
          <svg class="icon" aria-hidden="true" v-if="playType=='random'">
            <use xlink:href="#icon-random" />
          </svg>
             <svg class="icon" aria-hidden="true" v-if="playType=='xunhuan'">
            <use xlink:href="#icon-xunhuan" />
          </svg>
             <svg class="icon" aria-hidden="true" v-if="playType=='danquxunhuan'">
            <use xlink:href="#icon-danquxunhuan" />
          </svg>
        </button>

        <button>
          <svg class="icon" aria-hidden="true" >
            <use xlink:href="#icon-shangyiye" />
          </svg>
        </button>

        <button @click="paused">
          <svg class="icon paused" aria-hidden="true" v-if="pause">
            <use xlink:href="#icon-bofang2" />
          </svg>
          <svg class="icon paused" aria-hidden="true" v-if="!pause">
            <use xlink:href="#icon-bofang4" />
          </svg>
        </button>
        <button @click="nextSongs">
          <svg class="icon" aria-hidden="true" >
            <use xlink:href="#icon-fanye2" />
          </svg>
        </button>
        <button  @click="liked=!liked">
          <svg class="icon" aria-hidden="true" v-if="liked" >
            <use xlink:href="#icon-shoucang1" />
          </svg>
          <svg class="icon" aria-hidden="true" v-if="!liked">
            <use xlink:href="#icon-shoucang2" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import vHeader from "../../components/Header/Header";
import { getSongsDetails, getSongsLyric } from "../../api/recommend";

export default {
  data() {
    return {
      songsDetailsObj: {},
      songsLyric: [],
      nums: 0,
      pause:true,
      playType:'random',
      liked:true,
      audio:'',
      speed:0,
      timer:null
    };
  },
  components: {
    vHeader
  },
  created() {
    this.getData();
  },
  computed: {
    urlLists() {
      return this.$store.getters.getUrlLists;
    },
  },
  mounted(){
      this.audio=document.querySelector("audio")
      this.addEventListeners()
        let audio = document.querySelector('audio');
      if(!audio) return
    if(audio.paused){
        this.pause=true
    }else{
        this.pause=false
    }
  },
  methods: {
      nextSongs(){
        let nowSongsUrl=document.querySelector("audio").src
       let index= this.urlLists.findIndex(item=>{
            return item.url==nowSongsUrl
        })
         this.getData(this.urlLists.length-index)
      },
      addEventListeners: function () {
        document.querySelector('audio').addEventListener('timeupdate', this.currentTime)
        // self.$refs.player.addEventListener('canplay', self._durationTime)
      },
      currentTime(){
        let num = 0;
      if (this.$refs.lyricContent) {
        document.querySelectorAll(".over").forEach(item => {
          num += item.clientHeight;
        });
        //  this.timer= setInterval( ()=> {
        //     this.$refs.lyricContent.scrollTop+=1
        //     if( this.$refs.lyricContent.scrollTop == num - 150){
        //        this.timer=null
        //     }
        // },200)
        this.$refs.lyricContent.scrollTop = num - 150;
      }
          this.speed= document.querySelector('audio').currentTime
      },
    getData(index=1) {
      getSongsDetails(this.urlLists[this.urlLists.length - index].id).then(res => {
        this.songsDetailsObj = res.data.songs[0];
      });
      getSongsLyric(this.urlLists[this.urlLists.length - index].id).then(res => {
        this.songsLyric = res.data.lrc.lyric; //klyric.lyric 按照字节返回的歌词
        this.songsLyric = this.songsLyric.split("\n").map(item => {
          let index = item.indexOf("]");
          let lyric = item.slice(index + 1);
          let time = item.slice(1, index);
          time =
            +time.slice(0, time.indexOf(":")) * 60 +
            +time.slice(time.indexOf(":") + 1);
          return (item = {
            time: time,
            lyric: lyric
          });
        });
      });
    },
    paused() {
      if (this.audio.paused) {
        this.audio.play();
        this.pause=false
      } else {
        this.audio.pause();
         this.pause=true
      }
    }
  }
};
</script>

<style scoped lang="stylus">
button 
    background none 
    outline none 
    border 0
.icon {
  width: 45px;
  height: 45px;
  fill: currentColor;
  overflow: hidden;
}
 .paused
    width:55px;
    height:55px;
.content
    margin-top 50px
.lyricContent
    height 300px
    width 100%
    overflow scroll
    position relative
    bottom 120px
    transition all 1s 
    p
        font-size 20px
        line-height 30px
        width 80%
        word-break normal
        white-space pre-warp
        margin 0 auto
        text-shadow #fff 1px 1px
        font-weight 700
        &.over
            color gold
.bgWrapper
    width 350px
    height 350px
    margin 0px auto
    border-radius 50%
    border 2px dashed #fff
    // overflow hidden
    img 
        height 350px
        width 350px
        border-radius 50%
        opacity 0.9
        animation rotated 5s infinite ease
.audioControler
    height 80px
    width 100%
    position fixed 
    bottom 0
    left 0
@keyframes rotated {
    0%{
        transform rotate(360deg)
    }
    100%{
         transform rotate(0deg)
    }
}

</style>